<link rel="import" href="/bower_components/polymer/polymer-element.html">
<dom-module id="add-plugin">
    <template>
        <style>
            :host {
                display: flex;
            }

            #add {
                background-color: var(--brand);
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-weight: bold;
                padding: 9px 15px;
                cursor: pointer;
                height: 22px;
            }

            svg {
                margin-right: 10px;
            }
        </style>

        <div id="add" on-click="openDocs">
            <svg width="14" height="15" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Canvas0" transform="translate(-431 -1444)">
                    <use xlink:href="#path0_fill" transform="translate(430 1443.8)" fill="#FFF" id="plus" />
                </g>
                <defs>
                    <path id="path0_fill" d="M15 9.188a.754.754 0 0 1-.219.53.732.732 0 0 1-.531.22H9.937v4.312a.754.754 0 0 1-.218.531.732.732 0 0 1-.531.219H6.812c-.218 0-.406-.063-.53-.219-.157-.125-.22-.312-.22-.531V9.937H1.75c-.219 0-.406-.062-.531-.218C1.062 9.594 1 9.406 1 9.188V6.812a.73.73 0 0 1 .219-.53.754.754 0 0 1 .531-.22h4.313V1.75a.73.73 0 0 1 .218-.531A.754.754 0 0 1 6.813 1h2.375c.187 0 .374.094.53.219.126.156.22.343.22.531v4.313h4.312c.188 0 .375.093.531.218.125.157.219.344.219.532v2.375z"
                    />
                </defs>
            </svg>
            Add Plugin
        </div>

    </template>
    <script>
        class AddPlugin extends Polymer.Element {
            static get is() { return 'add-plugin'; }

            openDocs() {
                window.open('https://github.com/jadjoubran/webdash/wiki/List-of-Verified-Webdash-plugins', '_blank');
            }
        }

        window.customElements.define(AddPlugin.is, AddPlugin);
    </script>
</dom-module>
